import type { ModalProps } from 'antd';
import {Modal, Input, message, InputRef} from 'antd';
import type { FormInstance } from 'antd/es/form';
import React, {useRef, useState} from 'react';
import {updatePassWord} from "../../../api/user";

const useFormModal = (modalProps: { userInfo: {}; title: string }, Slot: React.ForwardRefExoticComponent<React.PropsWithoutRef<{}> & React.RefAttributes<unknown>>) => {
    //console.log(modalProps)
    const [visiable, setVisiable] = useState(false);
    const [userInfo,setUserInfo] = useState({id:0,password:""});
    const ref1 = useRef<InputRef|null>(null)
    const open = (id:number) => {
        setUserInfo({id:id,password: ""})
        setVisiable(true);
    };
    const close = () => {
        setVisiable(false);
    };
    const FormModal = (slotProps: any) => {
        const onCancel = () => {
            close();
        };

        const ref = React.useRef<FormInstance>();
        const ok = () => {
            //setVisiable(false);
            const password = ref1.current?.input?.value
            //ssetUserInfo({id:userInfo.id,password:password})
            const params = {id:userInfo.id,password:password}
            updatePassWord(params).then(res=>{
                if(res.data.code===1){
                    setVisiable(false);
                    message.success("修改成功")
                }
            })

            ref.current?.submit()
        };
        return (
            <Modal
                onCancel={onCancel}
                onOk={ok}
                visible={visiable}
                wrapClassName="modal-wrap"
                okText="提交"
                cancelButtonProps={{ shape: 'round' }}
                okButtonProps={{ shape: 'round' }}
                width={600}
                {...modalProps}
            >
                <Slot ref={ref} {...slotProps} afterSubmit={close} />
                <Input.Password placeholder="请输入密码"
                                name="password"
                                ref={ref1}
                ></Input.Password>
            </Modal>
        );
    };

    return {
        FormModal,
        open,
    };
};
export default useFormModal;

